<template>
  <div class="detail_intro">
    <section class="container">
      <div class="crumb"><router-link to="/" tag="span" >首页 </router-link>&gt; <span class="cur">职业介绍</span></div>
      <div class="intro_container">
        <h2 class="title">{{IntroObj.professionName}}</h2>
        <div class="text" v-html="IntroObj.professionContent">{{IntroObj.professionContent}}</div>
        <span class="tag">{{IntroObj.professionName.replace(/[\u4e00-\u9fa5]/g,"")}}</span>
      </div>
    </section>
  </div>
</template>
<!--suppress JSAnnotator -->
<script>
  /* eslint-disable quotes */
  export default {
    name: 'HomeBanner',
    props: {
      IntroObj: Object
    },
    components: {},
    computed: {},
    methods: {
    },

    activated () {
    }
  }
</script>
<style scoped="scoped" lang="stylus">
  .detail_intro {
    background #f9f9f9;
    padding 45px 0 180px;
  }

  .crumb {
    font-size: 22px;
    line-height: 42px;
    color: #333;
    cursor default
    .cur {
      color: #00c696;
    }
  }

  .intro_container {
    text-align center
    position relative
    margin-top 32px;
    .title {
      padding 17px 40px;
      color #333;
      font-size: 26px;
      font-weight bold
      display inline-block;
      border-bottom 1px solid #dadada;
      position relative;
      box-sizing border-box
      &:after {
        content: ''
        position absolute;
        bottom: -1px;
        width: 34px;
        height: 4px;
        z-index 100;
        left 50%;
        margin-left -17px;
        background-image: linear-gradient(267deg, #219aca 0%, #1bb0b0 60%, #14c696 100%), linear-gradient(#0e4696, #0e4696);
        background-blend-mode: normal, normal;
      }
    }
    .text {
      padding 30px 0;
      line-height: 36px;
      font-size 16px;
      color: #000000;
      opacity: 0.9;
    }
    .tag {
      font-weight bold;
      font-size: 140.3px;
      color: #000000;
      opacity: 0.08;
      position absolute;
      right: 0;
      bottom: 0;
    }
  }
</style>
